<template>
  <div>
    <dv-border-box-12 style="width: 400px; height: 250px">
      <dv-capsule-chart
        :config="config"
        style="
          width: 300px;
          height: 200px;
          position: relative;
          top: 25px;
          left: 60px;
        "
      />
    </dv-border-box-12>
    <dv-border-box-12 style="width: 400px; height: 250px">
      <cong-right-handtop></cong-right-handtop>
    </dv-border-box-12>
  </div>
</template>

<script>
import AV from "leancloud-storage";
import CongRightHandtop from "./CongRightHandtop.vue";

export default {
  data() {
    return {
      config: {},
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata () {
      // 获取数据
      const data = new AV.Query("tap");
      data.find().then((res) => {
        // console.log("data", res);
        // 弄一个空白的数组，把数据放到空数组里面
        let Arrdata = [];
        // 使用map进行遍历
        res.map(function (item) {
          let save = [];
          // 把数据进行添加到save中
          save.push(item.attributes.name);
          save.push(item.attributes.quantity);
          save["name"] = item.attributes.name;
          save["value"] = item.attributes.quantity;
          Arrdata.push(save);
          // console.log(save);
        });
        // console.log(Arrdata);
        // configs里面的打他是Arrdata
        this.config = {
          data: Arrdata,
          unit: "单位",
        };
      });
    },
  },
  components: {
    CongRightHandtop,
  },
};
</script>
